<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/jquery.min.js"></script>
</head>
<body>

<div ng-app="hd">

    <hd-cms hd-title="后盾人" hd-bgcolor="red" hd-fontcolor="#fff"></hd-cms>
    <hd-cms hd-title="aaaaaaaa" hd-bgcolor="green" hd-fontcolor="yellow"></hd-cms>
    <hd-cms hd-title="后盾人" hd-bgcolor="red" hd-fontcolor="#fff"></hd-cms>
    <hd-cms hd-title="后盾人" hd-bgcolor="red" hd-fontcolor="#fff"></hd-cms>

</div>


<script>
    var m = angular.module('hd', []);
    m.directive('hdCms', function () {
        //构建指令的代码
        return {
            restrict:'E',
            scope:{
                title: '@hdTitle',

            },
            link: function (scope, elem, attr) { //link是对指令的doucument元素进行处理，这里的scope是表示指令的作用域，elem表示标签元素，attr表示标签的属性列表
                $(elem).css({backgroundColor:attr['hdBgcolor'], color:attr['hdFontcolor']}).html(scope.title);
            },

        }
    });



</script>


</body>
</html>

